﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1024px;height: 600px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="http://api.go2map.com/maps/js/api_v2.5.1.js" type="text/javascript"></script>
<script src="http://api.go2map.com/maps/js/component/textIcon.js" type="text/javascript"></script>
<script src="http://api.go2map.com/maps/js/component/markerCluster.js" type="text/javascript"></script>
<script src="http://api.go2map.com/maps/js/component/markerManager.js" type="text/javascript"></script>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
var map, pt = [];

function initMap()
{
    var myOptions = {
      zoom: 14,
      mapControlType: 5,
      center: new sogou.maps.Point(12788625,4956500)
    }
    map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    //getMarkers();
    var o = {'map':map, markers:pt,averCenter:1,maxZoom:15};
    var m = new MarkerManager(o);
}

function setPosition(nid) {
	sogou.maps.event.addListenerOnce(map, 'click', function(event) {
		map.clearAll();
		//获取点击位置的坐标
		var marker = new sogou.maps.Marker({
      position: event.point, 
      map: map
  	});

	});
}

function getMarkers()
{
	var p, m;
	
	for (var i=0; i<=10; i++)
	{
		p = new _sg.Point(Math.random()*10001+12778625,Math.random()*10001+4946500);
		m = new sogou.maps.Marker({map:map, position:p});
		pt.push(m);
	}
}

function showButton(cellvalue, options, rowObject) {
	var nid = rowObject[0];
	
	return "<input type='button' value='设定' onClick='setPosition(\"" + nid + "\")' />";
}

function setButton() {
	jQuery("#list1").jqGrid('navGrid','#gridpager1',{edit:false,add:false,del:false,refresh:false,search:false})
		.jqGrid('navButtonAdd','#gridpager1',{
   		caption:"添加", 
   		buttonicon:"ui-icon-plus", 
   		onClickButton: function(){
				jQuery("#list1").jqGrid('editGridRow','new',{
					addCaption:"添加一个服务站网点",
					bSubmit:"保存",bCancel:"取消",modal: true, 
					closeAfterAdd:true, 
					reloadAfterSubmit:true,
					afterSubmit : function(r, postdata) {
			  					var data = eval('(' + r.responseText + ')');
			  					switch (data.code) {
			  						case 0: return [true, data.message]; break;
			  						default: return [false, data.message];
			  					}
			  	}
			  }); 
			}
		});
}

function setGrid() {
	jQuery("#list1").jqGrid({ 
			url:'main?action=23',
			datatype: "json",
			hidegrid: "false",
			colNames:['编码','地址','负责人','x坐标','y坐标','在地图上设定'], 
			colModel:[
					{name:'nid', width:40,sortable:false,align:'right',editable:true,editoptions:{size:8,maxlength:2},editrules:{integer:true, required:true}},
					{name:'nname', width:240,sortable:false,align:'right',editable:true,editoptions:{size:18,maxlength:18},editrules:{required:true}}, 
					{name:'pname', width:120, sortable:false,align:'right',editable:true,editoptions:{size:8,maxlength:8},editrules:{required:true}}, 
					{name:'px', width:120, sortable:false,align:'right', editable: false},
					{name:'py', width:120, sortable:false,align:'right', editable: false},
					{name:'butt', width:180, sortable:false,align:"center",formatter:showButton}
			], 
			viewrecords: true,
			rowNum:200,
			pager: '#gridpager1',
			editurl:'main?action=23',
			caption:"服务机构地图查看",
			height: 380
  })
};
	
	$(document).ready(function(){
		setGrid();
		setButton();
		initMap()
	});
</script>

<body style="background-color:#4e84c0;">
	
	<div id="map_canvas"></div>
	<div id="RightPane">
					<div class="innertube">
					<table id="list1"></table>
					<div id="gridpager1"></div>
					</div>
	</div>
</body>